<template>
	<view>

		<view class="welcome" v-if="onoff">

			<view class="hd">知识答题</view>

			<button class="ready" type="primary" @click="onready">准备好了</button>

		</view>
		<view class="qa" v-else>
			<view class="corner">{{corner}}</view>
			<view class="title">关于前端专业网络知识竞赛问答。</view>
			<view class="content">
				能够实现弹窗的功能是以下哪个API？
			</view>
			<view class="select">
				<view>A.showModal</view>
				<view>B.showModel</view>
				<view>C.showWindow</view>
				<view>D.showWindows</view>
			</view>
			<view class="tips">
				请选择你的答案（一次机会）
			</view>
			<button type="warn" @click="chooseAnswer" :disabled="disable">
				选择答案
			</button>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		toRefs,
		reactive
	} from 'vue';
	export default {
		setup() {
			const state = reactive({
				onoff: true,
				corner: 3,
				cc: 0,
				disable: false,
				answer: ["A", "B", "C", "D"]
			})

			const onready = () => {
				uni.showModal({
					title: "提醒",
					content: "答题马上开始，请认真作答",
					confirmText: "开始吧",
					cancelText: "再等等",
					success(e) {
						console.log(e);
						if (e.confirm) {
							state.onoff = !e.confirm;
							computeNum();
						}
					}
				})
			}

			const computeNum = () => {
				//开启计时器
				state.cc = setInterval(() => {
					state.corner = state.corner - 1
					console.log(state.corner);
					if (state.corner <= 0) {
						//关闭计时器
						clearInterval(state.cc);
						uni.showModal({
							title: "答题时间到。",
							showCancel: false
						})
						//关闭按钮
						state.disable = true;
					}

				}, 1000)
			}

			const chooseAnswer = () => {
				//禁用控件
				state.disable = true;
				uni.showActionSheet({
					itemList: state.answer,
					success(e) {
						clearInterval(state.cc)
						if (state.corner == 0) {
							uni.showModal({
								title: "回答超时",
								showCancel: false
							})
							return;
						}

						if (e.tapIndex == 0) {
							uni.showModal({
								title: "恭喜你答对了",
								showCancel: false
							})
						} else {
							uni.showModal({
								title: "很遗憾回答错误",
								showCancel: false
							})
						}
					}
				})
			}


			return {
				...toRefs(state),
				onready,
				chooseAnswer
			}
		}
	}
</script>

<style scoped>
	.hd {
		text-align: center;
		font-weight: bold;
		margin-top: 100rpx;
	}

	.ready {
		margin-top: 100rpx;
		width: 80%;
	}

	.title {
		text-align: left;
		font-weight: bold;
		margin-top: 40rpx;
	}

	.content {
		font-size: 32rpx;
		margin-top: 40rpx;
		line-height: 1.5em;
	}

	.select {
		margin-top: 40rpx;
		line-height: 1.2em;
	}

	.tips {
		color: red;
		margin-top: 40rpx;
		font-size: 24rpx;
	}

	.corner {
		background-color: red;
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		color: #fff;
		/* margin-right: 0rpx; */
		position: absolute;
		right: 0rpx;
		text-align: center;
	}
</style>
